<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../../js/constant/url.js"></script>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="css/general.css">
    <link rel="stylesheet" href="./css/groupManager.css">
    <title>分类管理</title>
</head>

<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <nav class="top-nav">
            <div class="nav-left">
                <div class="logo" v-if="!isMobile">
                    <a href="../../index.html">
                        <img src="../../imgs/218x60.png" alt="logo">
                    </a>
                </div>
            </div>
            <div class="nav-right">
                <div class="user-info" v-if="currentUser">
                    <span class="username">{{ currentUser.username }}</span>
                    <span class="permission-badge" :class="getPermissionClass(currentUser.permission)">
                        {{ getPermissionText(currentUser.permission) }}
                    </span>
                </div>
                <div class="nav-buttons">
                    <button class="nav-button" @click="goBack">
                        <i class="mdi mdi-arrow-left"></i>
                        <span>返回</span>
                    </button>
                    <button class="nav-button" v-if="currentUser && currentUser.permission > 0" @click="logout">
                        <i class="mdi mdi-logout"></i>
                        <span>退出</span>
                    </button>
                </div>
            </div>
        </nav>

        <!-- 管理导航 -->
        <div class="admin-nav">
            <a href="dataManager.html" class="admin-nav-item">
                <i class="mdi mdi-database"></i>
                <span>数据管理</span>
            </a>
            <a href="groupManager.html" class="admin-nav-item active">
                <i class="mdi mdi-folder-multiple"></i>
                <span>分类管理</span>
            </a>
            <a href="userManager.html" class="admin-nav-item" v-if="currentUser && currentUser.permission >= 4">
                <i class="mdi mdi-account-cog"></i>
                <span>用户管理</span>
            </a>
        </div>

        <!-- 主要内容区域 -->
        <main class="admin-content">
            <!-- 头部区域 -->
            <div class="content-header">
                <div class="search-section">
                    <div class="search-box">
                        <input type="text" id="search-input" v-model="searchQuery" placeholder="输入分类名称进行搜索" @keyup.enter="search">

                        <div class="search-controls">
                            <button class="search-btn" @click="search">
                                <i class="mdi mdi-magnify"></i>
                                <span>搜索</span>
                            </button>
                            <button class="reset-btn" @click="resetSearch">
                                <i class="mdi mdi-refresh"></i>
                                <span>重置</span>
                            </button>
                        </div>
                    </div>
                    <div class="search-right">
                        <p>分类数量&ensp;<span>{{ filteredGroups.length }}</span></p>
                        <button class="add-btn" @click="showAddModal">
                            <i class="mdi mdi-plus"></i>
                            <span>添加分类</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- 分类列表 -->
                <div class="data-list">
                    <div v-for="group in filteredGroups" :key="group.id" class="data-item">
                        <div class="data-icon">
                            <img :src="group.ico" :alt="group.name" v-if="group.ico">
                        </div>
                        <div class="data-info">
                            <h3>{{ group.name }}</h3>
                            <p>{{ group.description }}</p>
                            <div class="group-meta">
                                <span class="id">ID: {{ group.id }}</span>
                            </div>
                        </div>
                        <div class="data-actions">
                            <button class="action-btn edit" @click="editGroup(group)" :disabled="group.id === 6">
                                <i class="mdi mdi-pencil"></i>
                                <span>编辑</span>
                            </button>
                            <button class="action-btn delete" @click="deleteGroup(group)" :disabled="group.id === 6">
                                <i class="mdi mdi-delete"></i>
                                <span>删除</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Toast -->
        <div class="toast-container" v-if="toast.show">
            <div class="toast" :class="toast.type">
                {{ toast.message }}
            </div>
        </div>

        <!-- 添加/编辑分类模态框 -->
        <div class="modal" v-if="showModal">
            <div class="modal-content" @click.stop>
                <div class="modal-header">
                    <h2>{{ isEditing ? '编辑分类' : '添加分类' }}</h2>
                    <button class="close-btn" @click="closeModal">×</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">分类名称</label>
                        <input type="text" id="name" v-model="formData.name" placeholder="输入分类名称">
                    </div>
                    <div class="form-group">
                        <label for="ico">图标URL</label>
                        <div class="ico-input">
                            <input type="text" id="ico" v-model="formData.ico" placeholder="输入图标链接">
                            <img :alt="formData.name" v-if="formData.ico" :src="formData.ico" class="preview-ico">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="cancel-btn" @click="closeModal">取消</button>
                    <button class="save-btn" @click="saveGroup">{{ isEditing ? '保存' : '添加' }}</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/groupManager.js"></script>
</body>

</html>